<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments/head">
</head>

<body>
<header th:insert="fragments/header">
</header>

<main>
    <div id="index-banner" class="parallax-container">
        <div class="section no-pad-bot">
            <div class="container">
                <br><br>
                <h1 class="header center white-text">Students</h1>
                <div class="row center">
                    <h5 class="header col s12 light">Join our great staff of students</h5>
                </div>
                <br>
                <div class="row center">
                    <a th:href="@{/student/add}" class="waves-effect waves-light btn-large">Join Us</a>
                </div>
                <br><br>
            </div>
        </div>
        <div class="parallax"><img src="/img/docentes.jpg" alt="Unsplash teachers background"></div>
    </div>
    <div class="section">
        <div th:switch="students" class="container">
            <div th:case="*" class="row">
                <div class="col s12 center">
                    <h4>List of Students</h4>
                    <br>
                    <table class="highlight responsive-table">
                        <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Name</th>
                            <th scope="col">Last Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Description</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="student : ${students}">
                            <th scope="row" th:text="${student.studentId}"></th>
                            <td th:text="${student.nombre}"></td>
                            <td th:text="${student.apellido}"></td>
                            <td th:text="${student.correo}"></td>
                            <td th:text="${student.descripcion}"></td>
                            <td>
                                <div>
                                    <span>
                                        <a class="btn-floating waves-effect waves-light btn-small"
                                           th:href="|/student/${student.studentId}|"><i
                                                class="material-icons">chevron_right</i></a>
                                    </span>
                                    <span>
                                        <a th:href="@{/student/edit/{id_student}(id_student=${student.studentId})}" class="btn-floating waves-effect waves-light btn-small yellow darken-1"><i
                                                class="material-icons">edit</i></a>
                                    </span>
                                    <span>
                                        <a th:href="@{/student/delete/{id_student}(id_student=${student.studentId})}" class="btn-floating waves-effect waves-light btn-small red lighten-1"><i
                                                class="material-icons">delete_forever</i></a>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<br><br>

<footer class="page-footer teal" th:insert="fragments/footer">
</footer>

<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="/js/materialize.js"></script>
<script src="/js/init.js"></script>

</body>
</html>